<template>
  <vxe-table
    border
    show-overflow
    ref="xTable1"
    :row-config="{ isHover: true }"
    :sort-config="{ trigger: 'cell' }"
    :scroll-y="{ enabled: true }"
  >
    <vxe-column type="seq" width="100"></vxe-column>
    <vxe-column field="name" title="Name" sortable></vxe-column>
    <vxe-column field="sex" title="Sex"></vxe-column>
    <vxe-column field="age" title="Age"></vxe-column>
    <vxe-column field="address" title="Address" show-overflow></vxe-column>
  </vxe-table>
</template>
<script>
export default {
  data() {
    return {};
  },
  mounted() {
    this.$nextTick(() => {
      const $table = this.$refs.xTable1;
      this.mockList(500).then((data) => {
        console.log(111, data);
        if ($table) {
          $table.loadData(data);
        }
      });
    });
  },
  methods: {
    mockList(size) {
      return new Promise((resolve) => {
        const list = [];
        for (let index = 0; index < size; index++) {
          list.push({
            name: `名称${index}`,
            sex: "0",
            num: 123,
            age: 18,
            num2: 234,
            rate: 3,
            address: "shenzhen",
          });
        }
        resolve(list);
      });
    },
  },
};
</script>
